/**
 * @file 高途大屏项目
 */
import {Component} from 'react';
import {Button, Divider} from 'antd';
import echarts from 'echarts';
import moment from 'moment';
import Fullscreen from 'react-full-screen';
import {lineOptions} from '~/utils/common/echartsScreen';
import lineOptionsPerson from '~/utils/common/echartsScreenPerson';
import {getScreenGroup} from '~/service/screen';
import './index.styl';

const FRESH_INTERVAL = 1000;
class Group extends Component {
    constructor(props) {
        super(props);
        this.state = {
            options1: null,
            options2: null,
            time: moment().locale('zh-cn')
                .format('YYYY-MM-DD HH:mm:ss'),
            isFull: false,
            sendReq: true
        };
    }

    componentDidMount() {
        const {options} = this.state;
        const Html = document.getElementsByTagName('html')[0];
        Html.style.fontSize = 'calc(12px + (24 - 12)*(100vw - 320px)/(800 - 320))';
        this.chartsContainer1 = echarts.init(document.getElementById('echarts'));
        this.chartsContainer2 = echarts.init(document.getElementById('echartsPerson'));
        // 实现图表对象与窗口对象的尺寸一致的情况
        window.onresize = this.chartsContainer1.resize;
        window.onresize = this.chartsContainer2.resize;
        this.intervalId = setInterval(() => {
            this.loadData();
        }, FRESH_INTERVAL);
        this.timerId = setInterval(() => {
            this.setState({
                time: moment().locale('zh-cn')
                    .format('YYYY-MM-DD HH:mm:ss')
            });
        }, 1000);
    }

    componentWillUnmount() {
        clearInterval(this.intervalId);
        clearInterval(this.timerId);
    }

    loadData = () => {
        const locationhref = decodeURI(window.location.href);
        const params = locationhref.split('/');
        const Idstr = unescape(params[params.length - 1]);
        const id = Idstr.slice(0, Idstr.indexOf('类型'));
        const {sendReq} = this.state;
        if (sendReq) {
            getScreenGroup({id}).then(res => {
                const {data: {name, orderType, teamScreenStats = [], personalScreenStats = []}} = res;
                const options1 = lineOptions(teamScreenStats, orderType);
                this.setState({
                    options1
                });
                this.chartsContainer1.setOption(options1, true);
                lineOptionsPerson(personalScreenStats, ops => {
                    this.setState({
                        options2: ops
                    });
                    this.chartsContainer2.setOption(ops, true);
                });
            })
                .catch(() => {
                    this.setState({
                        sendReq: false
                    });
                });
        }
    };

    handleFull = () => {
        this.setState({isFull: true});
    };

    render() {
        const {options1, options2, isFull, time} = this.state;
        return (
            <div>
                <Button onClick={this.handleFull} type="link" style={{float: 'left'}}>
                    进入全屏
                </Button>
                <Fullscreen
                    enabled={isFull}
                    // eslint-disable-next-line react/jsx-no-bind
                    onChange={isFull => this.setState({isFull})}
                >
                    <div className="container_group">
                        <div className="container_group_person">
                            <div id="echarts"></div>
                            <Divider type="vertical" className="vertical_split" />
                            <div id="echartsPerson">aaa</div>
                        </div>
                        <div className="gaoto_time">
                            {time}
                        </div>
                    </div>
                </Fullscreen>
            </div>
        );
    }
}

export default Group;
